<template>
	<custom-page-select-layout>
		<template #header>
			<view class="search-wrapper" slot="header">
				<fui-search-bar paddingTb="0" searchText="" paddingLr="0" radius="16" height="80"
					inputBackground="#F3F3F3" isLeft :cancel="false" @clear="onClear"
					@input="onChangeKeywords"></fui-search-bar>

				<custom-select-page-path-nav :pathData="pathData" @all="onAll"
					@pathItem="onPathItem"></custom-select-page-path-nav>

			</view>

		</template>
		<template #body>

			<template v-if="multiple">
				<fui-checkbox-group :key="key">
					<fui-row v-for="(item,index) in viewListData" :key="index" class="cell  border">
						<fui-col :span="22" class="cell-left">
							<fui-label>
								<fui-checkbox @change="changeCheckBox($event,item)"
									:checked="checkedValue.includes(item.value)" :value="item.value"></fui-checkbox>
								<fui-text :text="item.label" class="text"></fui-text>
							</fui-label>
						</fui-col>
						<fui-col :span="2" class="cell-right" v-if=" item.children && item.children.length">
							<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48"
								@click="onNextIcon(item)"></fui-icon>
						</fui-col>
					</fui-row>

				</fui-checkbox-group>
			</template>

			<template v-else>
				<fui-radio-group :key="key">
					<fui-row v-for="(item,index) in viewListData" :key="index" class="cell  border">
						<fui-col :span="22" class="cell-left">
							<fui-label>
								<fui-radio @change="changeRadio($event,item)"
									:checked="checkedValue.includes(item.value)" :value="item.value"></fui-radio>
								<fui-text :text="item.label" class="text"></fui-text>
							</fui-label>
						</fui-col>
						<fui-col :span="2" class="cell-right" v-if="item.children && item.children.length">
							<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48"
								@click="onNextIcon(item)"></fui-icon>
						</fui-col>
					</fui-row>

				</fui-radio-group>
			</template>



		</template>
		<template #footer>
			<view class="footer">
				<template v-if="multiple">

					<custom-select-page-selected-multiple @selectAll="onSelectAll" :value="selectedTypeValue"
						@expand="visible=true">
					</custom-select-page-selected-multiple>
					<custom-select-page-selected-multiple-popup-data :data="checkedValue" :visible="visible"
						@close="visible=false" @remove="onRemovePopupListData">
					</custom-select-page-selected-multiple-popup-data>
				</template>
				<template v-else>
					<custom-select-page-selected :value="currentValueLabel"></custom-select-page-selected>

				</template>


				<fui-row class="button-wrapper" :gutter="16">
					<fui-col :span="6">
						<fui-button background="#F2F3FF" color="#0052D9" @click="onCancel">
							取消
						</fui-button>
					</fui-col>
					<fui-col :span="18">
						<fui-button @click="onConfirm">
							确认
						</fui-button>
					</fui-col>
				</fui-row>
			</view>
		</template>
	</custom-page-select-layout>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	import {
		defineComponent
	} from 'vue'
	import _ from 'lodash'
	import {
		convertToTree
	} from '../../utils/util.js'
	import {
		useSyStemStore
	} from '../../store/modules/system.js'
	import {
		dicToRewrite
	} from '../../utils/handleDicData.js'
	import {
		useDictStore
	} from '../../store/modules/dic.js'

	export default defineComponent({
		name: 'SelectPageDic',
		computed: {
			...mapState(useDictStore, ['pathData', 'viewListData', 'key']),
			...mapGetters(useDictStore, ['selectedTypeValue', 'checkedValue', 'currentValueLabel']),
			...mapState(useSyStemStore, ['dicList']),
			findDic() {
				return _.find(this.dicList, {
					type: this.dicKey
				}).data || []
			}

		},
		data() {
			return {
				currentValuePath: '',
				multiple: false,
				dicKey: '',
				storeKey: '',
				backToPath: null,
				visible: false,
			}
		},

		onLoad(options) {

			const is = {
				'false': false,
				'true': true
			}
			const {
				multiple,
				backToPath,
				dicKey,
				storeKey
			} = options
			console.log(options, 'options');
			this.backToPath = backToPath
			this.multiple = is[options.multiple]
			if (dicKey) {
				this.dicKey = dicKey
				this.storeKey = storeKey
				const rewriteSourceData = dicToRewrite(this.findDic)
				const treeList = convertToTree(rewriteSourceData, {
					id: 'id',
					parentId: 'parentId',
					name: 'label'
				})
				const copyViewListData = treeList
				const viewListData = treeList
				this.setInit({
					list: this.dicList,
					rewriteSourceData,
					viewListData: treeList,
					copyViewListData: _.cloneDeep(treeList),
					storeKey
				})

			}

		},
		methods: {
			...mapActions(useDictStore, ['onPathItem', 'onAll', 'setCheckedValue_CheckBox', 'setCheckValue_Radio',
				'setPathData',
				'setViewListData',
				'onChangeKeywords',
				'onSelectAll',
				'setInit',
				'setStoreKeyValue',
				'onRemovePopupListData'
			]),

			onCancel() {
				uni.redirectTo({
					url: this.backToPath
				})
			},

			onConfirm() {
				uni.redirectTo({
					url: this.backToPath
				})
			},
			onClear() {
				this.onChangeKeywords({
					detail: {
						value: ''
					}
				})
			},
			changeCheckBox(val, item) {
				this.setCheckedValue_CheckBox(val, this.storeKey)
			},

			changeRadio(val, item) {
				console.log(val, item, 'val, item');
				// this.currentValuePath = item._path
				this.setCheckValue_Radio(val.value)
				// this.setStoreKeyValue(val.value, item._name, this.storeKey)
			},

			onNextIcon(item) {

				this.setViewListData(item.children)
				this.setPathData({
					nodeName: item.label,
					value: item.value
				})
			}
		}
	})
</script>

<style lang="scss" scoped>
	.cell {
		// width: 654rpx;
		// height: 112rpx;
		background-color: #fff;
		// box-shadow: 32rpx -1rpx 0 #f1f1f1;

		&-left {
			padding: 32rpx 0 32rpx 16rpx !important;

			&:active {
				background-color: #f1f1f1;
			}

			.text {
				margin-left: 16rpx;
			}
		}

		&-right {
			padding: 32rpx 0;

			&:active {
				background-color: #f2f2f2;
			}
		}

	}

	.border {
		border-bottom: 2rpx solid #f1f1f1;
	}
</style>